<template>
  <!-- 修改用户对话框 -->
  <el-dialog 
    v-model="visible" 
    title="修改用户信息" 
    width="500px"
    :close-on-click-modal="false"
    class="user-update-dialog"
    @close="handleClose"
  >
    <el-form 
      ref="userUpdateForm" 
      :model="userUpdate" 
      :rules="rules"
      label-position="top"
      class="user-form"
      :validate-on-rule-change="false"
    >
      <el-form-item label="用户名" prop="userCode">
        <el-input 
          v-model="userUpdate.userCode" 
          disabled
          prefix-icon="User"
        >
          <template #append>
            <el-tag size="small" type="info">不可修改</el-tag>
          </template>
        </el-input>
      </el-form-item>
      <el-form-item label="昵称" prop="userName">
        <el-input 
          v-model="userUpdate.userName" 
          placeholder="请输入昵称"
          prefix-icon="UserFilled"
          :maxlength="20"
          show-word-limit
          clearable
        />
      </el-form-item>
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="handleClose">取消</el-button>
        <el-button 
          type="primary" 
          @click="updateUser"
          :loading="loading"
        >
          {{ loading ? '修改中...' : '确认修改' }}
        </el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script setup>
import { ref, reactive } from 'vue'
import { put, tip } from "@/common";
import { User, UserFilled } from '@element-plus/icons-vue'

const visible = ref(false);
const loading = ref(false);

// 修改用户对象
const userUpdate = reactive({
  userId: '',
  userCode: '',
  userName: ''
});

// 表单验证规则
const rules = reactive({
  userName: [
    { required: true, message: '请输入昵称', trigger: 'blur' },
    { min: 2, max: 20, message: '昵称长度为2-20位', trigger: 'blur' }
  ]
});

// 重置表单
const resetForm = () => {
  Object.assign(userUpdate, {
    userId: '',
    userCode: '',
    userName: ''
  });
  userUpdateForm.value?.resetFields();
};

// 关闭对话框
const handleClose = () => {
  resetForm();
  visible.value = false;
};

// 打开对话框并初始化
const open = (user) => {
  Object.assign(userUpdate, {
    userId: user.userId,
    userCode: user.userCode,
    userName: user.userName
  });
  visible.value = true;
};

const userUpdateForm = ref();
const emit = defineEmits(["ok"]);

// 修改用户
const updateUser = async () => {
  await userUpdateForm.value?.validate();
  
  loading.value = true;
  try {
    const result = await put('/user/updateUser', userUpdate);
    emit('ok');
    tip.success(result.message);
    handleClose();
  } catch (error) {
    console.error('Failed to update user:', error);
  } finally {
    loading.value = false;
  }
};

defineExpose({ open });
</script>

<style scoped>
.user-update-dialog {
  --el-dialog-padding-primary: 20px;
}

.user-form {
  padding: 0 20px;
}

:deep(.el-form-item__label) {
  padding-bottom: 8px;
  font-weight: 500;
  color: var(--el-text-color-primary);
}

:deep(.el-input__wrapper) {
  box-shadow: 0 0 0 1px #dcdfe6 inset;
}

:deep(.el-input__wrapper:hover) {
  box-shadow: 0 0 0 1px var(--el-color-primary) inset;
}

:deep(.el-input-group__append) {
  padding: 0 8px;
  background-color: transparent;
}

:deep(.el-tag) {
  margin: 0;
  border: none;
}

.dialog-footer {
  padding: 20px 0 0;
  text-align: right;
}

:deep(.el-dialog__header) {
  margin-right: 0;
  border-bottom: 1px solid var(--el-border-color-lighter);
  padding: 20px;
}

:deep(.el-dialog__body) {
  padding-top: 24px;
}

:deep(.el-dialog__footer) {
  border-top: 1px solid var(--el-border-color-lighter);
  padding: 20px;
}

:deep(.el-button) {
  padding: 8px 20px;
  border-radius: 2px;
}
</style>